<template>
    <teleport to='#back'>
       <div class="d-flex justify-content aligin-items-center h-100 w-100 loading-container"
            :style="{backgroundColor: background || ''}">
          <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden sr-only">{{ text || 'loading'}}</span>
          </div>
          <p v-if="text" class="text-primary small">{{text}}</p>
       </div>
    </teleport>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'
export default defineComponent({
  name: 'Loader',
  props: {
    text: {
      type: String
    },
    background: {
      type: String
    }
  },
  setup () {
    useDOMCreate('#back')
  }
})
</script>
